<script lang="ts" setup>
import type { studentInfo } from '@/api/type';
import { onMounted, reactive, ref } from 'vue';
import { useRouter } from 'vue-router'
const router = useRouter();
//用户信息部分
const user = ref<studentInfo>(useStudentStore().studentInfo);
// 控制加载
let loading = ref(false)
// 表单校验用绑定dom
const Forms = ref();
// 表单校验需要的配置对象
const rules = {
    name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
    phone: [{ required: true, pattern: /^\d{11}$/, message: '电话必须是11位数字', trigger: 'blur' }],
    email: [{ required: true, message: '邮箱不能为空', trigger: 'blur' },
    { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }]
}

const imageUrl = ref(user.value.avatar)
// 图片上传成功返回url
import type { UploadProps } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus';
import { useStudentStore } from '@/stores/student';
import { updateStudentInfo } from '@/api/user';
import { useTokenStore } from '@/stores/token';
const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
) => {
    imageUrl.value = response.data;
    user.value.avatar = imageUrl.value;
}
// 提交
async function submit() {
    try {
        await Forms.value.validate();
        // 开始加载
        loading.value = true
        ElMessageBox.confirm(`确认修改吗？`)
            .then(async () => {
                console.log("usersss==", user.value);
                let res = await updateStudentInfo(user.value)
                useStudentStore().setStudentInfo(user.value)
                ElMessage.success("修改成功");
                
            })
    } catch (error) {
        console.log(error);
    } finally {
        loading.value = false;
    }
}

</script>
<template>
    <div class="main">
        <el-card style="width: 60%;margin-top: 40px;">
            <el-form label-width="80px" :model="user" :rules="rules" ref="Forms">
                <div style="text-align: center; margin-bottom: 20px;">
                    <el-upload class="avatar-uploader" ref="uploadRef" action="/api/course/upload"
                        :show-file-list="false" :auto-upload="true" :headers="{ Authorization: useTokenStore().token }"
                        accept="image/jpg,image/jpeg,image/png" :on-success="handleAvatarSuccess">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>
                </div>
                <el-form-item label="用户名">
                    <el-input v-model="user.username" disabled></el-input>
                </el-form-item>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="姓名" prop="name">
                            <el-input v-model="user.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="学号">
                            <el-input v-model="user.schoolId"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="电话" prop="phone">
                    <el-input v-model="user.phone"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="user.email"></el-input>
                </el-form-item>
            </el-form>
            <el-button :loading="loading" type="primary" @click="submit" style="margin-left:30% ">提交</el-button>
            <el-button @click="router.replace({ path: '/studentLayout/homeStudent' })"
                style="margin-left:20% ">取消</el-button>
        </el-card>
    </div>
</template>

<style scoped>
.main {
    /* background-color: cornsilk; */
    display: flex;
    justify-content: center;
}

.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
    border-radius: 50%;
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>
